<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店管理系统 - 登录注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .card-shadow {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            }

            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }

            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }

            .form-transition {
                @apply transition-all duration-500 ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-neutral to-white min-h-screen font-inter text-neutral-dark flex items-center justify-center p-4">
<!-- 页面背景装饰 -->
<div class="fixed inset-0 overflow-hidden -z-10">
    <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/id/1048/1920/1080')] bg-cover bg-center opacity-10"></div>
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/5 to-secondary/5"></div>
</div>

<!-- 主容器 -->
<div class="w-full max-w-6xl bg-white rounded-2xl overflow-hidden shadow-2xl flex flex-col md:flex-row">
    <!-- 左侧图片区域 -->
    <div class="md:w-1/2 relative hidden md:block">
        <div class="absolute inset-0 bg-gradient-to-br from-primary/80 to-secondary/80 mix-blend-multiply"></div>
        <img src="https://picsum.photos/id/1048/800/1000" alt="酒店大堂" class="w-full h-full object-cover">
        <div class="absolute inset-0 flex flex-col justify-between p-10 text-white">
            <div>
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold tracking-tight">酒店管理系统</h1>
                <p class="mt-4 text-lg opacity-90 max-w-md">
                    提供全方位的酒店客房管理、预订处理和客户服务解决方案，让酒店管理更高效、更智能。
                </p>
            </div>
            <div class="space-y-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-bed text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">客房管理</h3>
                        <p class="text-sm opacity-80">轻松管理客房状态和信息</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-calendar-check text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">预订处理</h3>
                        <p class="text-sm opacity-80">高效处理客户预订请求</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-users text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">客户服务</h3>
                        <p class="text-sm opacity-80">提供优质客户服务体验</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧表单区域 -->
    <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
        <!-- 移动端标题 -->
        <div class="md:hidden mb-8 text-center">
            <h1 class="text-2xl font-bold text-primary">酒店管理系统</h1>
            <p class="text-gray-500 mt-2">高效、智能的酒店管理解决方案</p>
        </div>

        <!-- 表单切换导航 -->
        <div class="flex mb-8 border-b">
            <button id="login-tab" class="login-register-tab flex-1 py-3 font-medium text-lg text-primary border-b-2 border-primary">
                登录
            </button>
            <button id="register-tab" class="login-register-tab flex-1 py-3 font-medium text-lg text-gray-500 border-b-2 border-transparent">
                注册
            </button>
        </div>

        <!-- 登录表单 -->
        <div id="login-form" class="login-register-form">
            <h2 class="text-2xl font-bold mb-6">欢迎回来</h2>
            <p class="text-gray-500 mb-8">请登录您的账户继续访问系统</p>

            <form class="space-y-6">
                <div>
                    <label for="login-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="login-username" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入用户名">
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label for="login-password" class="block text-sm font-medium text-gray-700">密码</label>
                        <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="login-password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入密码">
                        <button type="button" id="toggle-login-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <div class="flex items-center">
                    <input id="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                </div>

                <button type="button" id="login-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center">
                    <span>登录</span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </form>

            <div class="mt-8 text-center">
                <p class="text-gray-500">
                    没有账户?
                    <button id="switch-to-register" class="text-primary font-medium hover:text-primary/80">立即注册</button>
                </p>
            </div>

            <div class="mt-8">
                <div class="relative flex items-center justify-center">
                    <div class="flex-grow border-t border-gray-300"></div>
                    <span class="flex-shrink mx-4 text-gray-500">或使用以下方式登录</span>
                    <div class="flex-grow border-t border-gray-300"></div>
                </div>

                <div class="flex justify-center space-x-4 mt-6">
                    <button class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-gray-700 transition-colors">
                        <i class="fa fa-weixin text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-gray-700 transition-colors">
                        <i class="fa fa-qq text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-gray-700 transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 注册表单 -->
        <div id="register-form" class="login-register-form hidden">
            <h2 class="text-2xl font-bold mb-6">创建账户</h2>
            <p class="text-gray-500 mb-8">请填写以下信息注册新账户</p>

            <form class="space-y-6">
                <div >
                    <div>
                        <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="register-name" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入姓名">
                        </div>
                    </div>
                </div>

                <div>
                    <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user-circle text-gray-400"></i>
                        </div>
                        <input type="text" id="register-username" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入用户名">
                    </div>
                </div>

                <div>
                    <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" id="register-email" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入电子邮箱">
                    </div>
                </div>

                <div>
                    <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="register-password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请输入密码">
                        <button type="button" id="toggle-register-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <div>
                    <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="register-confirm-password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus outline-none" placeholder="请再次输入密码">
                        <button type="button" id="toggle-confirm-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <div class="flex items-start">
                    <input id="terms" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary mt-1">
                    <label for="terms" class="ml-2 block text-sm text-gray-700">
                        我已阅读并同意<a href="#" class="text-primary hover:text-primary/80">服务条款</a>和<a href="#" class="text-primary hover:text-primary/80">隐私政策</a>
                    </label>
                </div>

                <button type="button" id="register-btn" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center">
                    <span>注册</span>
                    <i class="fa fa-user-plus ml-2"></i>
                </button>
            </form>

            <div class="mt-8 text-center">
                <p class="text-gray-500">
                    已有账户?
                    <button id="switch-to-login" class="text-primary font-medium hover:text-primary/80">立即登录</button>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/login-register.js"></script>
</body>